<template>
  <div id="transferAdd">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="手动办理" name="1"></el-tab-pane>
      <el-tab-pane label="审批办理" name="2"></el-tab-pane>
    </el-tabs>
    <div class="area area1" v-if="activeName == '1'">
      <div class="form">
        <div class="formHeader">
          <h2>{{ info.name }}</h2>
          <div class="info">
            <span>员工状态: {{ info.regularStateName }}</span>
            <span>员工类型: {{ info.registertypeName }}</span>
          </div>
        </div>
        <div class="formbody" style="padding: 50px 0">
          <el-form :rules="rules" :model="form" label-position="right" :inline="true" ref="ruleForm" class="demo-form-inline">
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                异动信息
              </div>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="异动类型" prop="changeType">
                <el-radio-group v-model="form.changeType">
                  <el-radio :label="option.key" v-for="(option, index) in OptionsData.Basics_changesType" :key="index">{{ option.value }}</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="异动原因" prop="changeCause" style="margin-left: 60px">
                <el-select v-model="form.changeCause" placeholder="请选择异动原因">
                  <el-option v-for="(option, index) in OptionsData.Basics_changesCause" :label="option.value" :value="option.key + ''" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                职位信息
              </div>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原部门:" label-width="87px">
                <div class="oldData">{{ info.departmentName }}</div>
              </el-form-item>
              <el-form-item label="变更后" prop="newDepartmentId" style="margin-left: 120px">
                <el-cascader popper-class="popper_person" v-model="form.newDepartmentId" :show-all-levels="false" :options="OptionsData.companySection" :props="defaultProps" clearable></el-cascader>
              </el-form-item>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原岗位:" label-width="87px">
                <div class="oldData">{{ info.postCodeName }}</div>
              </el-form-item>
              <el-form-item label="变更后" prop="newPostCode" style="margin-left: 120px">
                <el-select v-model="form.newPostCode" :placeholder="OptionsData.PM_post.length ? '请选择岗位' : '--'" clearable>
                  <el-option v-for="(option, index) in OptionsData.PM_post" :label="option.value" :value="option.key + ''" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原职位:" label-width="87px">
                <div class="oldData">{{ info.positionName }}</div>
              </el-form-item>
              <el-form-item label="变更后" prop="newPosition" style="margin-left: 120px">
                <el-select v-model="form.newPosition" :placeholder="OptionsData.PM_position.length ? '请选择职位' : '--'" clearable>
                  <el-option v-for="(option, index) in OptionsData.PM_position" :label="option.value" :value="option.key + ''" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原职级:" label-width="87px">
                <div class="oldData">{{ info.positionlevelname }}</div>
              </el-form-item>
              <el-form-item label="变更后" prop="newPositionLevel" style="margin-left: 120px">
                <el-select v-model="form.newPositionLevel" :placeholder="OptionsData.PM_positionLevel.length ? '请选择职级' : '--'" clearable>
                  <el-option v-for="(option, index) in OptionsData.PM_positionLevel" :label="option.value" :value="option.key + ''" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item class="lineform">
              <el-form-item label="原工作地点:" label-width="87px">
                <div class="oldData">{{ info.workaddressName }}</div>
              </el-form-item>
              <el-form-item label="变更后" prop="newWorkAddress" style="margin-left: 120px">
                <el-select v-model="form.newWorkAddress" :placeholder="OptionsData.PM_workAddress.length ? '请选择工作地点' : '--'" clearable>
                  <el-option v-for="(option, index) in OptionsData.PM_workAddress" :label="option.value" :value="option.key + ''" :key="index"></el-option>
                </el-select>
              </el-form-item>
            </el-form-item>
            <el-form-item class="block" label="备注" prop="remark">
              <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item class="block">
              <div class="tips">
                <el-divider direction="vertical"></el-divider>
                调动日期
              </div>
            </el-form-item>
            <el-form-item label="申请日期" prop="applyTime">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" disabled v-model="form.applyTime" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="生效日期" prop="commencementDate">
              <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.commencementDate" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <div class="area area2" v-if="activeName == '2'">
      <approvePerson :handleType="'transfer'" :employee-id="info.userId"></approvePerson>
    </div>
    <div class="footer" v-if="activeName == '1'">
      <el-button type="default" @click="back" :loading="loading">取消</el-button>
      <el-button type="primary" @click="saveform" :loading="loading">保存</el-button>
    </div>
  </div>
</template>

<script>
import approvePerson from "../approvePerson.vue";
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      // companySection: (state) => state.common.companySection,
      tagCurrent: (state) => state.tag.tagCurrent,
      userInfo: (state) => state.common.userInfo,
    }),
  },
  components: { approvePerson },
  data() {
    return {
      activeName: "1",
      form: {
        changeType: "",
        commencementDate: new Date(),
        employeeId: "",
        newCompanyId: null,
        newDepartmentId: "",
        newPositionLevel: "",
        newPostCode: "",
        newWorkAddress: "",
        remark: "",
        newPosition: "",
        applyTime: new Date(),
        changeCause: "",
      },
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
        checkStrictly: true,
        emitPath: false,
      },
      OptionsData: {},
      info: {},
      loading: false,
      rules: {
        changeCause: [{ required: true, message: "请选择异动原因", trigger: "change" }],
        remark: [{ max: 200, message: "字符不得超过200" }],
      },
    };
  },
  created() {
    let userId = this.$route.query.userId;
    if (!userId) {
      this.$message.warning("数据异常,请稍后重试");
      setTimeout(() => {
        this.$store.commit("DEL_TAG", this.tagCurrent);
        this.$router.back();
      }, 1000);
      return;
    }
    this.getBaseInfo();
    this.form.employeeId = userId;
  },
  mounted() {
    this.getUserDetail();
  },
  methods: {
    back() {
      this.$router.back();
    },
    getUserDetail() {
      this.$api.personChange.GetExamineApproveEmployeeInfo({ employeeId: this.form.employeeId }).then((res) => {
        let data = res.data.data;
        this.info = {
          name: data.name,
          registertypeName: data.registertypeName,
          regularStateName: data.regularStateName,
          departmentName: data.departmentName,
          postCodeName: data.postCodeName ? data.postCodeName : "--",
          positionName: data.positionName ? data.positionName : "--",
          positionlevelname: data.positionlevelname ? data.positionlevelname : "--",
          workaddressName: data.workaddressName ? data.workaddressName : "--",
          userId: data.userId,
        };
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    async getBaseInfo() {
      const {
        data: { data: PM_post },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "PM_post" });
      const {
        data: { data: PM_position },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "PM_position" });
      const {
        data: { data: PM_positionLevel },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "PM_positionLevel" });
      this.OptionsData = { PM_post, PM_position, PM_positionLevel };
      const {
        data: { data: Basics_changesCause },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "Basics_changesCause" });
      this.OptionsData = { PM_post, PM_position, PM_positionLevel };
      const {
        data: { data: PM_workAddress },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "PM_workAddress" });
      const {
        data: { data: Basics_changesType },
      } = await this.$api.optionsManage.GetEnumDataOptiont({ metaTypeCode: "Basics_changesType" });
      const {
        data: { data: companySection },
      } = await this.$api.optionsManage.GetDepartmentTree({ companyid: this.userInfo.companyid });
      this.OptionsData = { PM_post, PM_position, PM_positionLevel, PM_workAddress, Basics_changesCause, Basics_changesType, companySection: companySection.childrens };
    },
    saveform() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          let formData = JSON.parse(JSON.stringify(this.form));
          formData.newPostCode = Number(formData.newPostCode);
          formData.newPosition = Number(formData.newPosition);
          formData.newPositionLevel = Number(formData.newPositionLevel);
          formData.newWorkAddress = Number(formData.newWorkAddress);
          formData.changeType = Number(formData.changeType);
          this.$api.personChange
            .InsertEmployeeTransfer(formData)
            .then((res) => {
              this.loading = false;
              console.log(res, "res");
              if (res.data.status == 200) {
                this.$message.success("办理成功");
                this.$store.commit("DEL_TAG", this.tagCurrent);
                this.$router.back();
              }
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#transferAdd {
  .area {
    width: 100%;
    height: 85%;
  }

  .area1 {
    display: flex;
    justify-content: center;

    .form {
      width: 60%;
      height: 100%;

      .oldData {
        width: 140px;
      }

      .formHeader {
        width: 100%;
        height: 100px;
        background-image: url("../../../../assets/images/personnel/person_bg1.jpg");
        background-repeat: no-repeat; //不重复
        background-size: 100% 100%; // 满屏
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;

        h2 {
          font-weight: 600;
        }

        .info {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          width: 50%;
        }
      }

      .formbody {
        .el-form {
          .block {
            display: block;

            .tips {
              display: flex;
              align-items: center;

              .el-divider {
                background-color: #3ba5ed;
                width: 5px;
                border-radius: 15%;
              }
            }

            :deep(.el-textarea) {
              .el-textarea__inner {
                width: 500px;
                height: 100px !important;
              }
            }
          }

          .lineform {
            display: block;

            .el-form-item__content {
              width: 100%;
            }
          }
        }
      }
    }
  }

  .footer {
    background-color: white;
    width: 97%;
    border-top: 1px solid #ebeaf8;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: 0;
    padding: 16px 0;

    .el-button {
      height: 35px;
      width: 100px;
    }
  }

  :deep(.el-drawer__wrapper) {
    .el-drawer__body {
      position: relative;
    }

    position: absolute;

    .el-drawer__header {
      background-color: #f4f9fd;
      padding: 10px 10px;
      margin-bottom: 0;
    }

    .el-form {
      padding: 10px 15px;

      .el-form-item__label {
        line-height: 20px;
        padding: 0;
      }

      .el-input__inner {
        padding: 0;
      }

      .el-radio {
        left: 0;
      }
    }

    .footer {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      border-top: 1px solid #e5e5e5;
      padding: 10px;
    }
  }

  :deep(.v-modal) {
    position: absolute;
  }
}
</style>
